<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title>数据大屏</title>
    <link href="css/style.css" rel="stylesheet"/>

    <script src="../js/vue.min.js"></script>
    <script src="../js/axios.min.js"></script>
    <script src="../js/mqtt/mqtt.min.js"></script>

    <script src="js/jquery-1.8.0.min.js" type="text/javascript"></script>

    <script src="../js/threejs/libs/draco/draco_encoder.js"></script>

    <link href="../js/threejs/libs/codemirror/codemirror.css" rel="stylesheet"/>
    <link href="../js/threejs/libs/codemirror/theme/monokai.css" rel="stylesheet"/>
    <script src="../js/threejs/libs/codemirror/codemirror.js"></script>
    <script src="../js/threejs/libs/codemirror/mode/javascript.js"></script>
    <script src="../js/threejs/libs/codemirror/mode/glsl.js"></script>

    <script src="../js/threejs/libs/esprima.js"></script>
    <script src="../js/threejs/libs/jsonlint.js"></script>
    <script src="../js/threejs/libs/glslprep.min.js"></script>
    <script src="../js/threejs/libs/signals.min.js"></script>

    <link href="../js/threejs/libs/codemirror/addon/dialog.css" rel="stylesheet"/>
    <link href="../js/threejs/libs/codemirror/addon/show-hint.css" rel="stylesheet"/>
    <link href="../js/threejs/libs/codemirror/addon/tern.css" rel="stylesheet"/>

    <script src="../js/threejs/libs/codemirror/addon/dialog.js"></script>
    <script src="../js/threejs/libs/codemirror/addon/show-hint.js"></script>
    <script src="../js/threejs/libs/codemirror/addon/tern.js"></script>
    <script src="../js/threejs/libs/acorn/acorn.js"></script>
    <script src="../js/threejs/libs/acorn/acorn_loose.js"></script>
    <script src="../js/threejs/libs/acorn/walk.js"></script>
    <script src="../js/threejs/libs/ternjs/polyfill.js"></script>
    <script src="../js/threejs/libs/ternjs/signal.js"></script>
    <script src="../js/threejs/libs/ternjs/tern.js"></script>
    <script src="../js/threejs/libs/ternjs/def.js"></script>
    <script src="../js/threejs/libs/ternjs/comment.js"></script>
    <script src="../js/threejs/libs/ternjs/infer.js"></script>
    <script src="../js/threejs/libs/ternjs/doc_comment.js"></script>
    <script src="../js/threejs/libs/tern-threejs/threejs.js"></script>
</head>

<body>
<script type="module">
  import * as THREE from '../js/threejs/build/three.module.js'

  import Displayer from './js/Displayer.js'
  import Content from './js/Content.js'
  import Header from './js/Header.js'

  window.URL = window.URL || window.webkitURL
  window.BlobBuilder = window.BlobBuilder || window.WebKitBlobBuilder || window.MozBlobBuilder

  Number.prototype.format = function () {
    return this.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,')
  }

  // 初始化Display模块
  let displayer = new Displayer()

  window.editor = displayer // Expose displayer to Console
  window.displayer = displayer // Expose displayer to Console
  window.THREE = THREE // Expose THREE to APP Scripts and Console

  // 初始化header
  document.body.appendChild(new Header(displayer).dom)
  document.body.appendChild(new Content(displayer).dom)

  displayer.storage.init(function () {
    displayer.storageRemote.get().then((deployConfig) => {
      displayer.storage.get(function (state) {
        if (state !== undefined) {
          console.log('>>>>>>>>>>>>>> 缓存加载模型 <<<<<<<<<<<<<')
          if (isJSON(state)) displayer.fromJSON(state)
        } else {
          // 没有缓存时，直接执行模型配置初始化
          console.log(displayer.deployConfig)
          modelConfigInit()
        }
        setSceneLight()
      })
    })

    /**
     * 模型配置初始化
     * @author zhouwr
     */
    let modelConfigInitTimeout

    function modelConfigInit() {
      clearTimeout(modelConfigInitTimeout)
      modelConfigInitTimeout = setTimeout(function () {
        console.log('>>>>>>>>>> 模型配置初始化 <<<<<<<<<')
        displayer.signals.objectAllLoaded.active = false
        // 比对部署配置数据，比对不匹配的重新从远程加载
        // 1、比对场景：场景模型比较大，会有多个文件。缓存文件时以-加数字的方式区分
        modelConfigInitTimeout = setTimeout(function () {
          let modelFiles = displayer.deployConfig['modelFile'].split(',') // 后台请求的部署配置数据：场景数据
          for (const file of modelFiles) {
            let object = displayer.scene.getObjectByProperty('file', file)
            getObjectConfig('file', file, displayer.deployConfig)
          }
        }, 100)
        // 2、比对设备
        modelConfigInitTimeout = setTimeout(function () {
          let deviceConfs = displayer.deployConfig['deviceInstances']
          if (deviceConfs !== undefined && deviceConfs.length > 0) {
            for (const deviceConf of deviceConfs) {
              getObjectConfig('uuid', deviceConf.id, deviceConf)
            }
          }
        }, 100)
        displayer.signals.objectAllLoaded.active = true
      }, 800)
    }

    /**
     * 获取(缓存or远程)
     * @author zhouwr
     * @propertyName 查询关键字的名称
     * @propertyValue 查询关键字的值
     * @config 配置信息
     * @TODO 后台把模型的文件修改后，前端请求文件时，要替换掉模型对象
     */
    function getObjectConfig(propertyName, propertyValue, config) {
      let object = displayer.scene.getObjectByProperty(propertyName, propertyValue)
      if (object) {
        // 找到对象
        // 先拿到对象的medel跟配置信息的文件名对比
        if (object.file === config.modelFile) {
          // 模型文件相等，直接配置，无需重新请求模型文件
          displayer.configObj(object, config)
        } else {
          // 不想等
          console.log(`1、模型[${object.name}]的文件[${object.file}]与配置信息文件[${config.modelFile}]不匹配`)
          // 1、先删除模型对象
          console.log(`2、删除对象[${object.name}]`)
          displayer.execute(new RemoveObjectCommand(displayer, object))
          // 2、再重新请求模型文件
          console.log(`3、重新远程加载模型`)
          displayer.loaderRemote.loadFile(config)
        }
      } else {
        // 找不到对象，匹配不成功，后台加载模型文件
        displayer.loaderRemote.loadFile(config)
      }
    }

    /**
     * 判断从缓存读出来的JSON是否合法
     * @author zhouwr
     */
    function isJSON(json) {
      if (json.length < 36) {
        return false
      } else {
        return true
      }
    }

    /**
     * 设置灯光
     * @author zhouwr
     */
    function setSceneLight() {
      setTimeout(function () {
        if (!displayer.scene.getObjectByName('AmbientLight')) {
          let color = 0x222222
          let light = new THREE.AmbientLight(color)
          light.name = 'AmbientLight'
          displayer.addObject(light)
        }
        if (!displayer.scene.getObjectByName('DirectionalLight')) {
          let color = 0xffffff
          let intensity = 1
          let light = new THREE.DirectionalLight(color, intensity)
          light.name = 'DirectionalLight'
          light.target.name = 'DirectionalLight Target'
          light.position.set(5, 10, 7.5)
          displayer.addObject(light)
        }
      }, 100)
    }

    function setTitle(title) {
      document.title = title
    }

    let timeout

    function saveState() {
      clearTimeout(timeout)
      timeout = setTimeout(function () {
        displayer.storage.set(displayer.toJSON())
      }, 1000)
    }

    let signals = displayer.signals

    signals.objectAdded.add(saveState)
    // zhouwr
    signals.objectAllLoaded.add(modelConfigInit)
    signals.enableTransformControlsChanged.dispatch(false)
  })
</script>
<!--遮罩层-->
<div class="bgPop"></div>
<!--弹出框-->
<div class="pop">
    <div class="pop-top">
        报警记录
        <span class="pop-close">Ｘ</span>
    </div>
    <div class="pop-content">
        <table border="1" bordercolor="#deefff" class="panel-table">
            <thead align="center" bgcolor="#971212">
            <tr height="38">
                <th>字段</th>
                <th>字段</th>
                <th>字段</th>
                <th>字段</th>
                <th>字段</th>
            </tr>
            </thead>
            <tbody>
            <tr align="center" class="aaa" style="font-size: 16px">
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
            </tr>
            <tr align="center" class="aaa" style="font-size: 16px">
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
            </tr>
            <tr align="center" class="aaa" style="font-size: 16px">
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
            </tr>

            <tr align="center" class="aaa" style="font-size: 16px">
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
            </tr>
            </tbody>
        </table>
    </div>
    <div class="pop-foot">
        <input class="pop-cancel pop-close" type="button" value="确定"/>
    </div>
</div>
<script>
  $(document).ready(function () {
    $('.pop-close').click(function () {
      $('.bgPop,.pop').hide()
    })
    $('.click_pop').click(function () {
      $('.bgPop,.pop').show()
    })
  })
</script>
<!--遮罩层-->
<div class="bgPop2"></div>
<!--弹出框-->
<div class="pop2">
    <div class="pop-top">
        历史记录
        <span class="pop-close">Ｘ</span>
    </div>
    <div class="pop-content">
        <table border="1" bordercolor="#deefff" class="panel-table">
            <thead align="center" bgcolor="#10aaa5">
            <tr height="38">
                <th>字段</th>
                <th>字段</th>
                <th>字段</th>
                <th>字段</th>
                <th>字段</th>
            </tr>
            </thead>
            <tbody>
            <tr align="center" class="aaa" style="font-size: 16px">
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
            </tr>
            <tr align="center" class="aaa" style="font-size: 16px">
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
            </tr>
            <tr align="center" class="aaa" style="font-size: 16px">
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
            </tr>

            <tr align="center" class="aaa" style="font-size: 16px">
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
            </tr>
            </tbody>
        </table>
    </div>
    <div class="pop-foot">
        <input class="pop-cancel pop-close" type="button" value="确定"/>
    </div>
</div>
<script>
  $(document).ready(function () {
    $('.pop-close').click(function () {
      $('.bgPop2,.pop2').hide()
    })
    $('.click_pop2').click(function () {
      $('.bgPop2,.pop2').show()
    })
  })
</script>
<!--遮罩层-->
<div class="bgPop3"></div>
<!--弹出框-->
<div class="pop3">
    <div class="pop-top">
        组态应用
        <span class="pop-close">Ｘ</span>
    </div>
    <div class="pop-content">组态应用</div>
    <div class="pop-foot">
        <input class="pop-cancel pop-close" type="button" value="确定"/>
    </div>
</div>
<script>
  $(document).ready(function () {
    $('.pop-close').click(function () {
      $('.bgPop3,.pop3').hide()
    })
    $('.click_pop3').click(function () {
      $('.bgPop3,.pop3').show()
    })
  })
</script>
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/echarts.min.js" type="text/javascript"></script>
<script src="js/vue.min.js" type="text/javascript"></script>
<script src="js/index.js" type="text/javascript"></script>
</body>
</html>
